<template>
    <div id="Boss_User">
        <!-- 返回导航条 -->
        <router-view name="header" fixed :component_name="Boss_User"></router-view>
        <div id="Boss_User_name">所有用户信息:</div>
        <div v-if="loadingData">
            <mt-spinner type="double-bounce" class="loadingData"></mt-spinner>
        </div>
        <div v-else="loadingData">
            <div v-for="item in list" class="media-1-2">
                <mt-header :title="item.username" id="cell_1">
    
                    <mt-button slot="left" @click="deleteUser(item._id)">删除</mt-button>
    
                </mt-header>
                <div id="item_time">
                    创建时间：{{item.createAt}}
                    <br> 更新时间：{{item.updateAt}}
                    <br> 密码：{{item.password}}
                    <br>
                </div>
    
            </div>
    
        </div>
</template>

<script>
import Vue from 'vue'

export default {
    name: 'Boss_User',
    data() {
        return {
            loadingData: true,
            list: [],
        }
    },
    created() {
        // 获取用户信息渲染列表
        this.$store.dispatch({
            type: 'getUser',
            callback: (result) => {
                this.list = result.data;
                this.loadingData = false;
            }
        })
    },
    methods: {
        // 删除用户
        deleteUser(_id) {

            this.$store.dispatch("deleteusers", _id)
                .then(() => {
                    this.truedeletuser();
                    this.updateUser();
                })
        },
        truedeletuser() {
            this.$store.dispatch("deleteUser")
        },
        //    更新用户
        updateUser() {
            this.$store.dispatch(
                {
                    type: 'getUser',
                    callback: (result) => {
                        this.list = result.data;
                    }
                }
            )
        }
    }
}

</script>


<style>
#cell_1 {
    border-radius: 20px 20px;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid black !important;
}

#Boss_User_name {
    color: gray;
    font-size: 14px;
    text-align: left;
    margin-bottom: 30px;
}

#item_time {
    padding-left: 20px;
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.7);
    float: left;
    text-align: left;
    font-size: 13px;
}

.media-1-2 {
    margin-bottom: 10px;
    border-radius: 0px 60px;
    height: 110px;
    border: 1px solid rgba(168, 40, 53, 1);
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 20px;
}
</style>
